<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height: 60px">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="hAdd"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="list">
              <el-table-column type="index" label="序号" width="120" />
              <el-table-column prop="name" label="角色名称" width="240" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="small" type="success" @click="fn(scope)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="hEdit(scope.row.id)">编辑</el-button>
                  <el-button size="small" type="danger" @click="hDel(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-row
              type="flex"
              justify="center"
              align="middle"
              style="height: 60px"
            >
              <!-- 分页组件 -->
              <el-pagination
                layout="sizes,prev,pager,next"
                :current-page="page"
                :page-sizes="[2, 4, 5, 7]"
                :page-size="pagesize"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <el-dialog title="添加角色" :visible.sync="showDialog" @close="hClose">
      <el-form ref="formRef" :model="form" :rules="ruleForm" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="form.description" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="hSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRolesListAPI, delRoleAPI, addRoleAPI, getRoleAPI, editRoleAPI } from '@/api/settings'
export default {
  data() {
    return {
      list: [],
      page: 1,
      pagesize: 2,
      total: 0,
      form: {
        name: '',
        description: ''
      },
      ruleForm: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '角色名称长度为1-50位字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '角色描述长度为1-300位字符', trigger: 'blur' }
        ]
      },
      showDialog: false,
      isEdit: false
    }
  },
  created() {
    this.initRolesList()
  },
  methods: {
    // 关闭dialog执行的回调
    hClose() {
      // 清空表单
      this.$refs.formRef.resetFields()
    },
    // 初始化角色列表
    async initRolesList() {
      try {
        const res = await getRolesListAPI({ page: this.page, pagesize: this.pagesize })
        // 保存数据
        this.list = res.data.rows
        this.total = res.data.total
      } catch (err) {
        console.log('', err)
      }
    },
    // 改变每页显示条数时触发
    handleSizeChange(val) {
      console.log(val)
      this.pagesize = val
      this.page = 1
      this.initRolesList()
    },
    // 改变页码时触发
    handleCurrentChange(val) {
      this.page = val
      this.initRolesList()
    },
    fn(scope) {
      console.log(scope)
    },
    // 删除
    async doDel(id) {
      try {
        await delRoleAPI(id)
        // 保存数据
        this.$message.success('删除成功')
        this.initRolesList()
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    // 用户点击删除按钮
    hDel(id) {
      this.$confirm('确认删除？', '系统提示').then(() => {
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
        this.doDel(id)
      }).catch(() => {

      })
    },
    // 新增角色
    async addRole() {
      try {
        await addRoleAPI(this.form)
        this.initRolesList()
        this.$message.success('新增成功')
        this.showDialog = false
      } catch (err) {
        console.log('', err)
      }
    },
    // 表单提交按钮
    hSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return
        this.isEdit ? this.editRole() : this.addRole()
      })
    },
    // 根据id查询角色 表单回填
    async getRole(id) {
      try {
        const res = await getRoleAPI(id)
        console.log('', res)
        // 保存数据
        this.form = res.data
      } catch (err) {
        console.log('', err)
      }
    },
    // 根据id修改角色
    async editRole() {
      try {
        await editRoleAPI(this.form)
        this.showDialog = false
        this.$message.success('修改成功')
        this.initRolesList()
      } catch (err) {
        console.log('', err)
      }
    },
    // 点击了编辑按钮
    hEdit(id) {
      this.showDialog = true
      this.isEdit = true
      // 表单回填
      this.getRole(id)
    },
    // 点击了添加按钮
    hAdd() {
      this.showDialog = true
      this.isEdit = false
    }
  }
}
</script>
